import { inject, observer } from 'mobx-react';
import React from 'react';
import '../styles/appleItem.css';

@inject('apple')
@observer
class AppleItem extends React.Component {
    render() {
        const { noEatApples, eatApple } = this.props.apple
        return (
          noEatApples.length === 0 ? <div className="empty-tip">苹果篮子空空如也</div> :
          <div className="appleList">
            {
              noEatApples.map(apple => (
                <div className="appleItem" key={apple.id}>
                    <div className="apple"><img src={'/apple.png'} alt=""/></div>
                    <div className="info">
                        <div className="name">红苹果 {apple.id}-号</div>
                        <div className="weight">{apple.weight}克</div>
                    </div>
                    <div className="btn-div">
                        <button onClick={() => eatApple(apple.id)}> 吃掉 </button>
                    </div>
                </div>
              ))
            }
          </div>
        );
    }
}

export default AppleItem;